<!--
 * @Author: your name
 * @Date: 2021-03-31 20:39:00
 * @LastEditTime: 2021-04-16 10:21:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web\node\views\back\sowing_add.html
-->
<!-- 继承base基础模板 -->
{%  extends "back/base.html" %}

<!-- 留槽 样式 -->
{% block style %}
<style>
    .preview {
        width: 400px;
        height: 250px;
        padding: 0;
        margin-left: 15px;
        overflow: hidden;
        position: relative;
    }

    .preview:hover .cover {
        background-color: rgba(0, 0, 0, 0.4);
    }

    .preview:hover .fa-upload {
        color: rgba(240, 240, 240, 0.8);
    }

    #upfile {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .cover {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 250px;
        font-size: 40px;
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;
    }

    .fa-upload {
        color: rgba(240, 240, 240, 0);
    }
</style>
{% endblock %}

<!-- 留槽 主要内容 -->
{% block body %}
<div class="container-fluid">
    <div class="body advert">
        <!-- 面包屑 -->
        <ol class="breadcrumb">
            <li><a href="s_list">文章资源管理</a></li>
            <li class="active">修改文章</li>
        </ol>
        <div class="advert-add">

        </div>
    </div>
</div>
{% endblock %}

<!-- 留槽 脚本 -->
{% block script %}
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script>
    $(function () {
        loadData()
    })

    function loadData() {
        let url = window.location.href,
            sourceId = '';

        if (url.indexOf("?") !== -1) {
            sourceId = url.substr(url.indexOf("=") + 1);

            //发起数据请求
            $.ajax({
                url: "http://localhost:3000/back/source/api/single/" + sourceId,
                success: function (data) {
                    if (data.status === 200) {
                        console.log(data)
                        let tmp = `
                            <form action="/back/source/api/edit" method="post" class="form-horizontal" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="" class="col-md-3 control-label">标题</label>
                                    <div class="col-md-7">
                                        <input id="title" name="title" type="text" class="form-control input-sm" placeholder="填写轮播图名称" value="${data.result[0].title}" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-md-3 control-label">作者</label>
                                    <div class="col-md-7">
                                        <input id="author" name="author" type="text" class="form-control input-sm" placeholder="填写跳转链接" value="${data.result[0].author}" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-md-3 control-label">缩略图</label>
                                    <div class="col-md-2 preview">
                                        <img id="small_img" src="/uploads/${data.result[0].small_img}" style="border: 1px solid #e0e0e0;">
                                        <input type="file" id="upfile">
                                        <div class="cover">
                                            <i class="fa fa-upload"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-md-3 control-label">价格</label>
                                    <div class="col-md-7">
                                        <input id="price" name="price" type="number" class="form-control input-sm" value="${data.result[0].price}" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-md-3 control-label">文章内容</label>
                                    <div class="col-md-7">
                                        <div id="editor"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-7">
                                        <input type="submit"  class="btn btn-danger btn-sm pull-right" value="修改文章"></input>
                                    </div>                          
                                </div>
                            </form>
                            `
                        $(".advert-add").html(tmp);

                        //1.配置富文本编辑器
                        const E = window.wangEditor
                        const editor = new E('#editor')
                        // 2. 自定义上传图片事件
                        editor.config.customUploadImg = function (files, insert) {
                            console.log(files);
                            // 2.1 上传图片到服务器
                            if (files.length > 0) { // 有图片文件
                                // 取出图片
                                let formData = new FormData();
                                formData.append('image_url', files[0]);
                                // 发起ajax请求
                                $.ajax({
                                    url: 'http://localhost:3000/back/source/api/add_img',
                                    type: 'post',
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success: function (data) {
                                        console.log(data);
                                        if (data.status === 200) { // 上传成功
                                            insert(data.result);
                                        }
                                    }
                                });
                            }
                        };
                        editor.create();
                        editor.txt.html(data.result[0].content)


                        //上传图片加载处理
                        $("#upfile").on("change", function () {
                            let file = $(this).get(0).files[0];

                            let reader = new FileReader();
                            reader.readAsDataURL(file);

                            reader.onloadend = function () {
                                $("#small_img").attr("src", reader.result);
                            }
                        })


                        //修改处理
                        $("form").on("submit", function () {
                            //获取数据
                            let id = data.result[0]._id;
                            let title = $("#title").val();
                            let author = $("#author").val();
                            let small_img = $("#upfile").get(0).files[0] || data.result[0].small_img;                           
                            let price = $("#price").val();
                            let content = editor.txt.html();

                            //生成formData
                            let formData = new FormData();
                            formData.append("id", id);
                            formData.append("title", title);
                            formData.append("author", author);
                            formData.append("small_img", small_img);
                            formData.append("price", price);
                            formData.append("content", content);

                            //发起ajax请求
                            $.ajax({
                                url: $("form").attr('action'),
                                type: $("form").attr('method'),
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    console.log(data);
                                    if (data.status === 200) { // 添加成功
                                        alert('文章内容修改成功!');
                                        window.location.href = '/back/source_list'
                                    } else {
                                        alert('文章内容修改失败!');
                                    }
                                }
                            });

                            return false;
                        })




                    } else {
                        alert("数据请求错误！")
                    }
                }
            })

        }
    }
</script>
{% endblock %}